<script setup>

</script>

<template>
  <div class="header">
    <div class="logo">
      <img src="../assets/RPWORLD_LOGO_短 副本 9.png">
      <div class="slogan">
        High-mix, low-volume manufacturing service.
      </div>
    </div>


  </div>

</template>

<style scoped>
.header {

  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;

  padding: 12px 60px;

}

.logo {
  flex: 0 0 auto;
}

img{

  width: 400px;
  margin: 0 auto;
}

.slogan {
  flex: 0 0 auto;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 20px;
}
@media (max-width: 750px) {
  .header {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    padding: 10px 30px;

  }
  .logo {
    flex: 0 0 auto;
    text-align: left;
  }

  .slogan {
    flex:0 0 auto;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 8px;
    letter-spacing: 0.5px;
    line-height: 12px;
  }

  img{
    width: 200px;
    margin: 0 auto;
  }
}



</style>